<!--待办中心&#45;&#45;tab切换小组件-->
<template>
  <a-tabs default-active-key="1" v-model="selectTabKeyT" @change="tabCallBack_t(selectTabKeyT,dropdownKey)">
    <a-tab-pane key="1">
              <span class="tab-title" slot="tab">{{$t('todoPage.tabName.todoProcess')}}<div class="taskNum" 
                                                          v-if="parseInt(toDoProcessNum) > 0">{{ toDoProcessNum }}</div></span>
    </a-tab-pane>
    <a-tab-pane key="2">
              <span class="tab-title" slot="tab">{{$t('todoPage.tabName.tasksToBePerformed')}}<div class="taskNum"
                                                           v-if="parseInt(outTask) > 0">{{ outTask }}</div></span>
    </a-tab-pane>
    <a-tab-pane key="3">
              <span class="tab-title" slot="tab">{{$t('todoPage.tabName.tasksToBeReviewed')}}<div class="taskNum"
                                                           v-if="parseInt(toReviewedTask) > 0">{{
                  toReviewedTask
                }}</div></span>
    </a-tab-pane>
  </a-tabs>
</template>
<script>
export default {
  name: "tabChange",
  data() {
    return {
      selectTabKeyT:'1'
    }
  },
  props: {
    selectTabKey: {
      type: String,
      default: '1'
    },//选中的tab的key
    dropdownKey: {
      type: String,
      default: 'NOT_COMPLETED'
    },//下拉框选中的数据
    toDoProcessNum: {
      type: Number,
      default: 0
    },//待办流程数量
    outTask: {
      type: Number,
      default: 0
    },//执行任务
    toReviewedTask: {
      type: Number,
      default: 0
    },//待审核任务
  },
  watch:{
    selectTabKey(val){
      this.selectTabKeyT=val
    }
  },
  methods: {
    tabCallBack_t(selectTabKey, dropdownKey) {
      this.$emit('tabCallBackT', selectTabKey, dropdownKey)
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .ant-tabs-nav {
  display: flex;
}
/deep/ .ant-tabs-nav .ant-tabs-tab {
  padding: 5px 9px;
}
.tab-title {
  width: 100%;
  height: 30px;
  //background-color: green;
  display: flex;
  justify-content: center;
  align-items: center;
}
.taskNum {
  min-width: 18px;
  height: 18px;
  border-radius: 100px;
  background-color: #f5222d;
  margin: -15px 0px 0px 5px;
  padding: 0px 3px 0px 3px;
  line-height: 18px;
  color: #ffffff;
  font-size: 12px;
}
/*.taskNumZero {
  min-width: 18px;
  height: 18px;
  border-radius: 100px;
  background-color: #386bd7;
  margin: -15px 0px 0px 5px;
  padding: 0px 3px 0px 3px;
  line-height: 18px;
  color: #ffffff;
  font-size: 12px;
}*/
</style>